<template>
  <el-row :gutter="20" class="top">
    <el-col :span="3"><img class="tu" src="../../assets/logo.png" alt=""></el-col>
    <el-col :span="3"
      ><div class="grid-content bg-purple"><h4>轻音播放器</h4> </div></el-col
    >
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-button-group>
          <el-button
            color="#e84b46"
            :dark="isDark"
            plain
            @click="$router.go(-1)"
            ><el-icon><ArrowLeftBold /></el-icon
          ></el-button>
          <el-button
            color="#e84b46"
            :dark="isDark"
            plain
            @click="$router.go(+1)"
            ><el-icon><ArrowRightBold /></el-icon
          ></el-button>
        </el-button-group>
      </div>
    </el-col>
    <el-col :span="6" :offset="6"
      ><div class="grid-content bg-purple tou">
        <HomeCe/>
        <span>{{this.$store.state.login.data.profile.nickname}}</span>
      </div></el-col
    >
  </el-row>
</template>

<script setup>
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
import HomeCe from './HomeCe.vue'
</script>

<style lang="less" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.top {
  background-color: #fd544d;
  color: aliceblue;
  font-size: 17px;
}
div {
  line-height: 58px;
}
.tou{
  display: flex;
  align-items: center;
  span{
    font-size: 12px;
    margin-left: 5px;
  }
}
.tu{
  width: 40px;
  height: 40px;
  float: right;
  margin-top: 10px;
}
h4{
  margin: 0;
}
</style>
